#{extends 'main.html' /}
#{set title:'Search' /}
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
<body>
	<h1>搜索上影集团院线</h1>
	<p>
	    <input type="text" id="search" size="30">
	    <input type="submit" id="submit" value="查找院线">
	    <br>
	          最多显示结果: 
	    <select id="size">
	        <option value="5">5</option>
	        <option value="10">10</option>
	        <option value="20">20</option>
	    </select>
	</p>
	
	<div id="result"></div>
	
	<script type="text/javascript" charset="${_response_encoding}">
	
	    // Rebuild state
	    $('#search').val(sessvars.search)    
	    if(sessvars.page == undefined) {
	        sessvars.page = 1
	    }
	    if(sessvars.size == undefined) {
	        sessvars.size = 10
	    }
	    $('#size option[value='+sessvars.size+']').attr('selected', 'true')
	    
	    // Search function
	    var search = function() {
	        sessvars.search = $('#search').val()
	        sessvars.size = $('#size').val()
	        var listAction = #{jsAction @list(':search', ':size', ':page') /} 
	        $('#result').load(listAction({search: sessvars.search, size: sessvars.size, page: sessvars.page}), function() {
	            $('#content').css('visibility', 'visible')
	        })
	    }
	    
	    // Events handler
	    $('#submit').click(function() {
	        sessvars.page = 1
	        search()
	    })
	    $('#search').keyup(function() {
	        sessvars.page = 1
	        search()
	    })
	    $('#nextPage').live('click', function(e) {
	        sessvars.page = $(this).attr('href')
	        e.preventDefault()
	        search()        
	    })
	    
	    // Init
	    if(sessvars.search != undefined) {
	        $('#content').css('visibility', 'hidden')
	        search()
	    }
	    
	</script>
	
	<h1>目前您已办理的电影票有</h1>
	
	#{ifnot bookings}
	    <p>
	                 不好意思，您还没有办理上影集团院线出售的票！
	    </p>
	#{/ifnot}
	#{else}
	   <table>
	       <thead>
	           <tr>
	               <th>院线名称</th>
	               <th>地址</th>
	               <th>省市, 国家</th>
	               <th>开始日期</th>
	               <th>结束日期</th>
	               <th>数量</th>
	               <th>详情</th>
	           </tr>
	       </thead>
	       <tbody>
	           #{list bookings, as:'booking'}
	               <tr>
	                   <td>${booking.hotel.name}</td>
	                   <td>${booking.hotel.address}</td>
	                   <td>${booking.hotel.city}, ${booking.hotel.state}, ${booking.hotel.country}</td>
	                   <td>${booking.checkinDate.format('yyyy-MM-dd')}</td>
	                   <td>${booking.checkoutDate.format('yyyy-MM-dd')}</td>
	                   <td>${booking.id}</td>
	                   <td>
	                        #{a @cancelBooking(booking.id)}Cancel#{/a}
	                   </td>
	               </tr>
	           #{/list}
	       </tbody>
	   </table> 
	#{/else}
</body>